import React, { Component } from "react";
import { nanoid } from "nanoid";
import { connect } from "react-redux";
import { createAddPersonAction } from "../redux/person_action";

class Person extends Component {
  add = () => {
    const name = this.nameNode.value;
    const age = this.ageNode.value;
    const obj = { id: nanoid(), name, age };
    console.log("obj :>> ", obj);
    console.log(this.props);
    this.props.add(obj);
  };
  render() {
    return (
      <div>
        <h2>this is person 组件</h2>
        姓名：
        <input
          ref={(c) => {
            this.nameNode = c;
          }}
          type="text"
        ></input>
        <br />
        年龄：
        <input
          ref={(c) => {
            this.ageNode = c;
          }}
          type="text"
        ></input>
        <br />
        <button onClick={this.add}>添加</button>
        <br />
        <ul>
          {this.props.person.map((item) => {
            return (
              <li key={item.id}>
                name:{item.name} --- age:{item.age}
              </li>
            );
          })}
        </ul>
        <h3>person 获取 countUI的数据</h3>
        <h3>count = {this.props.count}</h3>
      </div>
    );
  }
}

const mapState = (state) => {
  return { person: state.person, count: state.count };
};

const mapDispatch = (dispatch) => {
  return {
    add: (obj) => {
      dispatch(createAddPersonAction(obj));
    },
  };
};
export default connect(mapState, mapDispatch)(Person);
